<template>
    <div class="chart-box">
        <span>家事纠纷案件</span>
        <div ref="chart1"></div>
        <span>涉未成年人案件</span>
        <div ref="chart2"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: "DoubleExcellence",
    data() {
        return {
            options: {

                title: {
                    text: '总数',
                    x: '16.2%',
                    y: '40%',
                    textStyle: {
                        fontSize: 16,
                        color: '#fff'
                    },
                    subtext: '288',
                    subtextStyle: {
                        fontSize: 15,
                        color: '#fff'
                    },
                },
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    left: '45%',
                    align: 'left',
                    top: 'middle',
                    icon: 'circle',
                    type: 'scroll',
                    orient: 'vertical',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                },
                series: [
                    {
                        type: 'pie',
                        center: ['20%', '50%'],
                        radius: ['45%', '80%'],
                        clockwise: false, //饼图的扇区是否是顺时针排布
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                            }
                        },
                        labelLine: {
                            normal: {
                                length: 5,
                                length2: 3,
                                smooth: true,
                            }
                        },
                        data: [
                            { value: 335, name: "民事", itemStyle: { color: "rgb(134, 140, 255)" } },
                            { value: 310, name: "刑事", itemStyle: { color: "rgb(23, 167, 144)" } },
                            { value: 234, name: "行政", itemStyle: { color: "rgb(255, 209, 39)" } },
                        ]
                    }
                ]
            }
        }
    },
    mounted() {

        setTimeout(() => {
            const option = JSON.parse(JSON.stringify(this.options))
            const chart = echarts.init(this.$refs.chart1)
            option.series[0].data = [
                { value: 335, name: "离婚纠纷",  },
                { value: 310, name: "抚养纠纷",  },
                { value: 234, name: "继承纠纷",  },
                { value: 234, name: "赡养纠纷",  },
                { value: 234, name: "认识安全保护令",  },
                { value: 234, name: "离婚后财产纠纷",  },
                { value: 234, name: "同居关系纠纷",  },
            ]
            chart.setOption(option)

            const chart2 = echarts.init(this.$refs.chart2)
            chart2.setOption({
                ...this.options,
            })
        }, 0)
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 530px;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 0;

    span {
        font-size: 18px;
        color: #FFFFFF
    }

    div {
        width: 100%;
        flex: 1;
    }
}
</style>